<!DOCTYPE html>
<html>
<head>
    <title>Baidu Map API Test</title>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=eaV8OIruO7nXlIMKMu5I0OTZLd9YScpa"></script>
    <style>
        body { margin: 0; padding: 20px; font-family: Arial, sans-serif; }
        #map { width: 100%; height: 500px; border: 2px solid #ccc; margin: 20px 0; }
        .status { padding: 10px; margin: 10px 0; border-radius: 5px; }
        .success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
        .error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
        .info { background-color: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }
    </style>
</head>
<body>
    <h1>Baidu Maps API Test</h1>
    <div id="status" class="status info">正在加载百度地图API...请等待地图显示</div>
    <div id="map"></div>
    
    <script>
        let map;
        
        function testBaiduMap() {
            try {
                // 检查BMap对象是否可用
                if (typeof BMap === 'undefined') {
                    document.getElementById('status').innerHTML = '错误: BMap对象未加载，请检查API密钥和网络连接';
                    document.getElementById('status').className = 'status error';
                    return;
                }
                
                // 创建地图实例
                map = new BMap.Map("map");
                
                // 设置中心点（北京天安门）
                const point = new BMap.Point(116.4074, 39.9042);
                map.centerAndZoom(point, 12);
                
                // 启用滚轮缩放
                map.enableScrollWheelZoom(true);
                
                // 添加控件
                map.addControl(new BMap.NavigationControl());
                map.addControl(new BMap.ScaleControl());
                
                // 创建标记点
                const marker = new BMap.Marker(point);
                map.addOverlay(marker);
                
                // 添加信息窗口
                const infoWindow = new BMap.InfoWindow(
                    "<h4>北京储能站</h4>" +
                    "<p>装机容量: 30.4 MW/60.8 MWh</p>" +
                    "<p>电池类型: 磷酸铁锂</p>" +
                    "<p>坐标: 116.4074°E, 39.9042°N</p>",
                    {
                        width: 220,
                        height: 120,
                        title: "储能站信息"
                    }
                );
                
                // 添加点击事件
                marker.addEventListener("click", function() {
                    this.openInfoWindow(infoWindow);
                });
                
                // 添加更多测试标记点
                const testPoints = [
                    { lng: 121.4737, lat: 31.2304, name: "上海储能站", capacity: "25.6 MW/51.2 MWh" },
                    { lng: 113.2644, lat: 23.1291, name: "广州储能站", capacity: "37.0 MW/74.0 MWh" },
                    { lng: 114.0579, lat: 22.5431, name: "深圳储能站", capacity: "28.6 MW/57.2 MWh" }
                ];
                
                testPoints.forEach(function(pointData) {
                    const testPoint = new BMap.Point(pointData.lng, pointData.lat);
                    const testMarker = new BMap.Marker(testPoint);
                    map.addOverlay(testMarker);
                    
                    const testInfoWindow = new BMap.InfoWindow(
                        `<h4>${pointData.name}</h4>` +
                        `<p>装机容量: ${pointData.capacity}</p>` +
                        `<p>坐标: ${pointData.lng}°E, ${pointData.lat}°N</p>`,
                        { width: 220, height: 100 }
                    );
                    
                    testMarker.addEventListener("click", function() {
                        this.openInfoWindow(testInfoWindow);
                    });
                });
                
                // 更新状态
                document.getElementById('status').innerHTML = 
                    '成功: 百度地图API加载完成！已显示' + (testPoints.length + 1) + '个储能站位置';
                document.getElementById('status').className = 'status success';
                
                console.log('Baidu Map API Status:', {
                    version: BMap.version,
                    ak: 'eaV8OIruO7nXlIMKMu5I0OTZLd9YScpa',
                    center: map.getCenter(),
                    zoom: map.getZoom(),
                    markers: map.getOverlays().length
                });
                
            } catch (error) {
                document.getElementById('status').innerHTML = '错误: ' + error.message;
                document.getElementById('status').className = 'status error';
                console.error('Baidu Map Error:', error);
            }
        }
        
        // 等待页面加载完成
        window.onload = function() {
            // 延迟执行，确保API完全加载
            setTimeout(testBaiduMap, 1000);
        };
    </script>
</body>
</html>